﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/FrontSite.Master" Inherits="System.Web.Mvc.ViewPage" Title="前台首页" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    登录历史
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
    <script src="../../Handlers/jquery.pagination.js"></script>
    <link href="../../Handlers/pagination.css" rel="stylesheet" />
    <script type="text/javascript">
        var pageIndex = 0;     //页面索引初始值
        var pageSize = 10;     //每页显示条数初始化，修改显示条数，修改这里即可


        $(function () {
            InitTable(0);    //Load事件，初始化表格数据，页面索引为0（第一页）
            var pageCount;
            //分页，PageCount是总条目数，这是必选参数，其它参数都是可选
            //用Ajax请求获取pageCount的值
            $.ajax({
                type: "POST",
                url: 'GetloginHistoryCount',
                success: function (pageCount) {
                }, error: function () { alert('加载数据异常，请重试!'); }
            });


            $("#Pagination").pagination(100, {
                callback: PageCallback,
                prev_text: '上一页',       //上一页按钮里text
                next_text: '下一页',       //下一页按钮里text
                items_per_page: pageSize,  //显示条数
                num_display_entries: 6,    //连续分页主体部分分页条目数
                current_page: pageIndex,   //当前页索引
                num_edge_entries: 2        //两侧首尾分页条目数
            });

            //翻页调用
            function PageCallback(index, jq) {
                InitTable(index);
            }

            //请求数据
            function InitTable(pageIndex) {
                $.ajax({
                    type: "POST",
                    dataType: "text",
                    url: '../../Handlers/PagerHandler.ashx',      //提交到一般处理程序请求数据
                    data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,          //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)                
                    success: function (data) {
                        $("#login-histroy-data tr:gt(0)").remove();        //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
                        $("#login-histroy-data").append(data);             //将返回的数据追加到表格
                    }
                });
            }

        });

    </script>

    <script type="text/javascript">
        //设置当前导航栏的样式为“已点击”
        jQuery(document).ready(function ($) {
            $('#lnkbtnSafetySetup').css("color", "red");
            //刷新“btnLogin”为“btnLogout”
            document.getElementById("btnLogin").text = "退出";
            $('#btnLogin').text = "退出";
        })
    </script>

    <style type="text/css">
        .login-histroy-info, .changelog-info {
            text-align: center;
        }

            .login-histroy-info .info-uname {
                color: #1d61ad;
                font-weight: bold;
            }

        .login-histroy-result, .changelog-result {
            text-align: right;
            margin-bottom: 10px;
            margin-right: 140px;
        }

        .mod-reset-listnav .listnav-list {
            border-bottom: 1px solid #dfdfdf;
        }

        .mod-reset-listnav .listnav-list-item.active {
            border-left-color: #3891eb;
            background: #fff;
            width: 128px;
            color: #3891eb;
        }

        .mod-reset-content {
            width: 980px;
            margin-left: auto;
            margin-right: auto;
        }

        .main {
            width: 980px;
            margin-left: auto;
            margin-right: auto;
        }

        div {
            display: block;
        }

        .mod-reset-listnav .listnav-list {
            border-bottom: 1px solid #dfdfdf;
            width: 134px;
        }

        .mod-reset-listnav .listnav-list-item {
            display: block;
            padding-top: 17px;
            padding-bottom: 17px;
            line-height: 16px;
            height: 16px;
            width: 130px;
            border-left: 5px solid #f9f9f9;
            font-size: 16px;
            font-family: \5fae\8f6f\96c5\9ed1,\9ed1\4f53;
            color: #666;
            background: none repeat scroll 0 0 #f9f9f9;
            text-align: center;
        }

        .mod-reset-listnav {
            width: 710px;
            height: 640px;
            border: 1px solid #dcdcdc;
        }

        .clearfix {
            zoom: 1;
        }

        .mod-reset-list table {
            z-index: 1;
            left: 387px;
            top: 220px;
            position: absolute;
            height: 48px;
            width: 490px;
            border-top-style: none;
            border-top-color: inherit;
            border-top-width: 0;
        }

        tbody {
            display: table-row-group;
            vertical-align: middle;
            border-color: inherit;
        }
    </style>
    <style>
        body {
            text-align: center;
        }

        .mod-reset-content clearfix {
            width: 70%;
            margin: 0 auto;
        }

        .mod-reset-list {
            border: 1px solid #dcdcdc;
            height: 640px;
            width: 710px;
        }

        .listnav-list-item.active {
            background: none repeat scroll 0 0 #fff;
            border-left-color: #3891eb;
            color: #3891eb;
            width: 130px;
        }

        .auto-style5 {
            width: 194px;
        }

        .auto-style6 {
            width: 184px;
        }

        .auto-style7 {
            width: 181px;
        }
    </style>
    <div class="mod-reset-content clearfix">
        <div class="mod-reset-listtop">
            <p class="login-histroy-info">
                &nbsp;
            </p>
            <p class="login-histroy-info">
                &nbsp;
            </p>
            <p class="login-histroy-info">
                <span class="info-uname">李伟</span>，您可以查看最近一个月的登录情况，若存在异常登录记录，请在核实后尽快<a href="modifyPwd">修改密码</a>
            </p>
            <p class="login-histroy-info">
                &nbsp;
            </p>
            <div class="login-histroy-result">
                查询结果：共112条记录
            </div>
        </div>
        <div class="mod-reset-listnav left" style="float: left; width: 130px; height: 300px; border: 1px solid #dcdcdc; background: none repeat scroll 0 0 #f9f9f9;">
            <ul>
                <li class="listnav-list"><a class="listnav-list-item active" href="loginHistory">登录记录</a> </li>
                <li class="listnav-list"><a class="listnav-list-item " href="modifyPwd">修改密码</a> </li>
            </ul>
        </div>
        <div class="listnav right" style="border: 1px solid black; height: 300px; border: 1px solid #dcdcdc;">
            <div class="clearfix">
                <table id="login-histroy-data">
                    <tbody>
                        <tr class="login-histroy-title">
                            <th class="auto-style5">时间</th>
                            <th class="auto-style6">地点</th>
                            <th class="auto-style7">IP</th>
                            <th class="auto-style7">浏览器</th>
                        </tr>
                    </tbody>
                </table>
                <div id="Pagination" style="left: 30%; clip: rect(auto, auto, auto, 30%);"></div>
                <br />
            </div>
        </div>
    </div>
    </div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="head" runat="server">
</asp:Content>
